<template>
	<view>
		<view style="height: 180rpx; background-color: white;"></view>
		<view class="fixed">
			<view class="header">
				<view class="btn1" @tap="back">取 消</view>
				<view class="btn2" @tap="clickConfirm">发 布</view>
			</view>
			<view class="header" style="height: 20rpx;border-bottom: 1rpx solid #e7eaea;"></view>
		</view>
		<view style="height: 10rpx;"></view>
		<view class="item">
			<view class="type">
				<view class="text">名称：</view>
				<input class="input1" type="text" placeholder="请输入酒店名称" v-model="name">
			</view>
			<view class="type">
				<view class="text text1">酒店介绍：</view>
				<textarea class="input1 textarea" placeholder="请输入酒店介绍" v-model="detail" />
			</view>

			<view class="type">
				<view class="text" style="height: 40upx;line-height: 40upx;">入住类型：</view>
				<view class="" style="width: 75%;display: flex;flex-wrap: wrap;">
					<view style="margin-bottom: 10upx;" class="type1" @tap="changeCheckinType(index)"
						v-for="(item,index) in checkin_type_arr">
						<image
							:src="index == current_checkin_type?'/static/images/xianshi.png':'/static/images/buxianshi.png'"
							class="icon" mode="widthFix"></image>
						<view class="" style="font-size: 28upx;">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="type">
				<view class="text">价格：</view>
				<input class="input1" type="text" placeholder="请输入价格" v-model="price">
			</view>
			<view class="type">
				<view class="text">面积：</view>
				<input class="input1" type="text" placeholder="请输入面积" v-model="size">
			</view>
			<view class="type">
				<view class="text">床位：</view>
				<view class="btn" @tap="bedActive(index)" :class="[index==current_signle_double_bed?'active':'']"
					v-for="(item,index) in signle_double_bed_arr">{{item.name}}
				</view>
			</view>
			<view class="type">
				<view class="text">联系人：</view>
				<input class="input1" type="text" placeholder="请输入联系人姓名" v-model="contacts">
			</view>
			<view class="type">
				<view class="text">联系电话：</view>
				<input class="input1" type="text" placeholder="请输入联系电话" v-model="mobile">
			</view>
			<view class="type">
				<view class="text">房间照片：</view>
				<uploads :type="code"></uploads>
				<!-- <image src="@/static/images/Add.png" mode="widthFix" class="add"></image> -->
			</view>
			<view class="type">
				<view class="text">服务设施(可多选)</view>
			</view>
			<view class="type">
				<view class="text text2">服务：</view>
				<view class="add-btn">
					<view class="btn" @tap="serviceActive(index)" :class="[index==current_service?'active':'']"
						v-for="(item,index) in service_arr">{{item.name}}
					</view>
				</view>
			</view>
			<view class="type">
				<view class="text text2">基础：</view>
				<view class="add-btn">
					<view class="btn" @tap="baseActive(index)" :class="[index==current_base?'active':'']"
						v-for="(item,index) in base_arr">{{item.name}}
					</view>
				</view>

			</view>
			<view class="type">
				<view class="text text2">卫浴：</view>
				<view class="add-btn">
					<view class="btn" @tap="bathroomActive(index)" :class="[index==current_bathroom?'active':'']"
						v-for="(item,index) in bathroom_arr">{{item.name}}
					</view>
				</view>
			</view>
			<view class="type typeBottom">
				<image src="@/static/images/tianjiadidian.png" class="location" mode="widthFix"></image>
				<!-- <view class="type-didian">选择城市</view> -->
				<Region :defaultValue="defaultValue" @change="onChangeRegion"></Region>
			</view>
			<view class="type">
				<view class="text text1">具体位置：</view>
				<input class="input1" placeholder="请输入具体位置" v-model="address" />
			</view>
		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import Region from '@/components/region/region.vue';
	import uploads from "@/components/uploads.vue";
	export default {
		data() {
			return {
				noClick: true,
				name: '',
				detail: '',
				price: '',
				size: '',
				pics: '',
				code: '1',
				defaultValue: [],
				location: '',
				contacts: '',
				mobile: '',
				address: '',

				checkin_type_arr: [],
				current_checkin_type: 0,
				checkin_type: 0,

				signle_double_bed_arr: [],
				current_signle_double_bed: 0,
				signle_double_bed: 0,

				service_arr: [],
				current_service: 0,
				service: 0,

				base_arr: [],
				current_base: 0,
				base: 0,

				bathroom_arr: [],
				current_bathroom: 0,
				bathroom: 0,
			};
		},

		components: {
			Region,
			uploads
		},

		onLoad: function() {

			this.getHouseInfo();

			uni.$on('change', (options) => {
				this.pics = JSON.stringify(options)
			})
		},

		methods: {
			back() {
				uni.redirectTo({
					url: '/pages7/pages/index/index'
				})
			},

			onChangeRegion(region) {
				let id = 0;
				let area = [];
				this.location = region[1].id;
				if (region[2].id > 0) {
					id = region[2].id;
					area = [region[0].name, region[1].name, region[2].name];
					this.location = region[2].id;
				} else {
					id = region[1].id;
					area = [region[0].name, region[1].name, ''];
				}
				this.defaultValue = area;
			},

			async getHouseInfo() {
				let res = await this.$myRequest({
					url: '/get_house_rent_info'
				})

				let data = res.data.data;
				this.checkin_type_arr = data.checkin_type;
				this.signle_double_bed_arr = data.signle_double_bed;
				this.service_arr = data.service;
				this.base_arr = data.base;
				this.bathroom_arr = data.bathroom;

				this.checkin_type = this.checkin_type_arr[0].id;
				this.signle_double_bed = this.signle_double_bed_arr[0].id;
				this.service = this.service_arr[0].id;
				this.base = this.base_arr[0].id;
				this.bathroom = this.bathroom_arr[0].id;
			},

			changeCheckinType(index) {
				this.current_checkin_type = index;
				this.checkin_type = this.checkin_type_arr[index].id;
			},

			bedActive(index) {
				this.current_signle_double_bed = index;
				this.signle_double_bed = this.signle_double_bed_arr[index].id;
			},

			serviceActive(index) {
				this.current_service = index;
				this.service = this.service_arr[index].id;
			},

			baseActive(index) {
				this.current_base = index;
				this.base = this.base_arr[index].id;
			},

			bathroomActive(index) {
				this.current_bathroom = index;
				this.bathroom = this.bathroom_arr[index].id;
			},

			// 提交表单
			async clickConfirm() {
				//防止连续点击
				let that = this;
				if (that.noClick) {
					that.noClick = false;
					setTimeout(function() {
						that.noClick = true;
					}, 2000)
				} else {
					that.$api.msg("请稍后点击")
					return false;
				}
				//判断是否登录
				let result = that.$api.isLogin();
				if (result === false) {
					return false;
				}

				if (!that.name) {
					that.$api.msg('请输入出租房名称！');
					return false;
				}

				if (!that.location) {
					that.$api.msg('请选择城市！');
					return false;
				}

				if (!that.price || that.price <= 0) {
					that.$api.msg('请输入价格！');
					return false;
				}

				if (!that.size || that.size <= 0) {
					that.$api.msg('请输入面积！');
					return false;
				}

				if (!that.contacts) {
					that.$api.msg('请输入联系人姓名！');
					return false;
				}

				if (!that.mobile) {
					that.$api.msg('请输入联系电话！');
					return false;
				}

				if (!that.pics) {
					that.$api.msg('请上传房屋照片！');
					return false;
				}

				let token = uni.getStorageSync('token')
				let cate = uni.getStorageSync('cate')
				let dataObj = {
					token: token,
					cate: cate,
					name: that.name,
					detail: that.detail,
					checkin_type: that.checkin_type,
					price: that.price,
					size: that.size,
					signle_double_bed: that.signle_double_bed,
					contacts: that.contacts,
					mobile: that.mobile,
					pics: that.pics,
					service: that.service,
					base: that.base,
					bathroom: that.bathroom,
					district: that.location,
					address: that.address
				};

				// console.log(dataObj)
				that.submit(dataObj);
			},

			//登录提交
			async submit(dataObj) {
				let res = await this.$myRequest({
					url: '/add_house_rent',
					data: dataObj,
					methods: 'post'
				})

				let status = res.data.status
				if (status) {
					this.$api.msg('添加成功');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages7/pages/index/index'
						})
					}, 1000)
				}
			},
		},
	}
</script>

<style lang="scss">
	page {
		font-size: 30rpx;
		// padding-right: 5rpx;
	}

	.fixed {
		position: fixed;
		top: 0rpx;
		z-index: 10000;
		width: 100%;
		// margin-top: 30rpx;
		height: 200rpx;
		background-color: white;
	}

	.header {
		display: flex;
		justify-content: space-between;
		position: absolute;
		bottom: 30rpx;
		width: 100%;
		align-items: center;

		.btn1 {
			margin-left: 35rpx;

		}

		.btn2 {
			color: white;
			background-color: #f3511a;
			border-radius: 50rpx;
			padding: 10rpx;
			width: 100rpx;
			text-align: center;
			margin-right: 35rpx;
			margin-bottom: 20rpx;
		}
	}

	.item {
		.type {
			display: flex;
			align-items: center;
			margin-left: 30rpx;
			margin-top: 20rpx;
			flex-wrap: wrap;

			.text {
				width: 23%;
				letter-spacing: 2rpx;
			}

			.input1 {
				background-color: #f5f5f5;
				padding: 20rpx;
				height: 70rpx;
				width: 75%;
				font-size: 28rpx;
			}

			.textarea {
				height: 200rpx;
			}

			.icon {
				width: 30rpx;
				height: 30rpx;
				margin-top: 5rpx;
				margin-right: 10rpx;
				margin-left: 10rpx;
			}

			.btn {
				color: #999999;
				background-color: #f7f7f7;
				text-align: center;
				border-radius: 10rpx;
				margin-left: 20rpx;
				padding: 10rpx;
				margin-top: 10rpx;
				font-size: 14px;
			}

			.add {
				width: 200rpx;
				height: 200rpx;
			}

			.add-btn {
				display: flex;
				height: 100%;
				width: 80%;
				flex-wrap: wrap;
			}

			.text2 {
				margin-top: 20rpx;
			}
		}

		.type1 {
			display: flex;
			margin-left: 10rpx;
			// margin-top: 10rpx;
		}

		.typeBottom {
			width: 90%;
			margin: 20rpx auto;
			background-color: #f5f5f5;
			border-radius: 10rpx;
			height: 100rpx;
			display: flex;
			align-items: center;

			.location {
				width: 30rpx;
				height: 36rpx;
				margin: 20rpx;
			}

			.type-didian {
				flex: 1;
			}

			.right {
				width: 14rpx;
				height: 24rpx;
				margin-right: 30rpx;
			}
		}
	}

	.active {
		background-color: #3c87fe !important;
		color: #fff !important;
	}
</style>